<!DOCTYPE html>
<html>

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>INSPINIA | Dashboard v.4</title>

    <link href="/static/admin/cmsStyle/css/bootstrap.min.css" rel="stylesheet">
    <link href="/static/admin/cmsStyle/font-awesome/css/font-awesome.css" rel="stylesheet">
    <link href="/static/admin/cmsStyle/css/animate.css" rel="stylesheet">
    <link href="/static/admin/cmsStyle/css/style.css" rel="stylesheet">


    <!-- Toastr style -->
    <link href="/static/admin/cmsStyle/css/plugins/toastr/toastr.min.css" rel="stylesheet">

    <!-- Gritter -->
    <link href="/static/admin/cmsStyle/js/plugins/gritter/jquery.gritter.css" rel="stylesheet">

</head>

<body class="top-navigation">

<div id="wrapper">
    <div id="page-wrapper" class="gray-bg">
        <div class="row border-bottom white-bg">
        </div>
        <div style="padding-top: 10px;">

            <div class="row  border-bottom white-bg dashboard-header">
                <div class="col-sm-12" id="money" style="height: 40rem"></div>
            </div>
        </div>
    </div>
    {include file='common/dashBoard_js'}
    <script src="/static/echart/echarts.js"></script>
    <script src="/static/echart/vintage.js"></script>
    <script src="/static/echart/macarons.js"></script>
    {include file='common/footer'}
    <script >
        $(function () {
            var money = echarts.init(document.getElementById('money'));
            option1 = {
                backgroundColor: "#fff",
                color: ['#24a7f6', '#fc6175'],

                title: [{
                    text: '',
                    left: '1%',
                    top: '3%',
                    textStyle: {
                        color: '#111'
                    }
                }],
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    x: '45%',
                    top: '2%',
                    textStyle: {
                        color: '#f00',
                    },
                    data: ['2017年', '2018年']
                },
                grid: {
                    left: '0',
                    right: '2%',
                    top: '12%',
                    bottom: '6%',
                    containLabel: true
                },
                toolbox: {
                    "show": false,
                    feature: {
                        saveAsImage: {}
                    }
                },
                xAxis: {
                    type: 'category',
                    "axisLine": {
                        lineStyle: {
                            color: '#111'
                        }
                    },
                    "axisTick": {
                        "show": false
                    },
                    axisLabel: {
                        textStyle: {
                            color: '#111'
                        }
                    },
                    boundaryGap: false,
                    data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月','8月','9月','10月','11月','12月']
                },
                yAxis: {
                    "axisLine": {
                        lineStyle: {
                            color: '#111'
                        }
                    },
                    splitLine: {
                        show: true,
                        lineStyle: {
                            color: '#e5e5e5'
                        }
                    },
                    "axisTick": {
                        "show": false
                    },
                    axisLabel: {
                        textStyle: {
                            color: '#111'
                        }
                    },
                    type: 'value'
                },
                series: [{
                    name: '2017年',
                    smooth: true,
                    type: 'line',
                    symbolSize: 8,
                    symbol: 'circle',
                    data: [90, 50, 39, 50, 120, 82, 80,70, 50, 50, 87, 90]
                }, {
                    name: '2018年',
                    smooth: true,
                    type: 'line',
                    symbolSize: 8,
                    symbol: 'circle',
                    data: [70, 50, 50, 87, 90, 80, 70,90, 50, 39, 50, 120]
                },]
            }

            money.setOption(option1);
        })



    </script>



</body>
</html>
